<!-- 首页图片未登录，添加图片modal -->
<template>
    <a-modal :width='400'
    :title='modalProps.title'
    :visible="visible"
    @ok="handleOk"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"

    >
      <a-form  :form='form'>
        <a-form-item label='banner 图' :label-col='{ span : 6}'  :wrapper-col="{ span : 16 }" >
            <!-- 图像上传组件
                uploading，removeFile：父组件对应效果实现；
                uploadSuccess：文件code双向绑定隐藏域imgcode【initial设置初始值；setfiledvalue手动设置(验证状态 非验证)表单值并能自动更新表单验证结果 】-->
             <imageUpload style='width: 112px;height: 112px' :fileList='fileData' v-on:uploading='($event)=>{fileData = $event}' v-on:removeFile='(e)=>removeFile(e)' v-on:uploadSuccess='(file,fileList)=>uploadSuccess(file,fileList)'></imageUpload> 
             <a-input    v-decorator="['imageFileCode' , baseInit.imageFileCode]" placeholder='hide'/>
        </a-form-item>
         
        <a-form-item  label='顺序' :label-col='{ span : 6}'  :wrapper-col="{ span : 16 }" >
            <a-input-number  v-decorator="['sort' , baseInit.sort]"  :min="1" :max="10"  placeholder='输入数字'/> 
        </a-form-item>
        <a-form-item  label='banner 标题' :label-col='{ span : 6}'  :wrapper-col="{ span : 16 }" >
            <a-input    v-decorator="['imageTitle' , baseInit.imageTitle]" />
        </a-form-item>
        <a-form-item  label='banner 简介' :label-col='{ span : 6}'  :wrapper-col="{ span : 16 }" >
            <a-input    v-decorator="['imageText' , baseInit.imageText]" />
        </a-form-item>

        <a-form-item  style='display: none' >
            <a-input    v-decorator="['code' , baseInit.code]" />
        </a-form-item>

      </a-form> 
    </a-modal>
</template>
<script>
    
  import  imageUpload from  '@/components/common/imageUpload'
  import  {  submit_swiper_un  }  from  '@/api/minipro/HomeSetting'
export default {
  name: 'swiperAModal',
  props:{
      visible:{
        type:Boolean,
        default:false
      }, 
  },
  data () {
    return {
        modalProps:{
          title:'新增首页轮播图（未登录可见）',
          isEdit:false, /*表单进入状态*/
        }, 
         /*等待动作*/
        confirmLoading: false,

        fileData:[],/*图片返回*/
        /*form 初始值*/
        baseInit:{
          code:{initialValue:''},/*隐藏input里加上code*/

          imageFileCode:{initialValue:'',rules : [{ required : true , message : '请上传首页图' }]},/*隐藏input里加上code*/
          sort:{ initialValue :''},
          imageText:{ initialValue :''},
          imageTitle:{ initialValue :''}, 
        },      
        currentSort:null,                                                        
    }
  },
  methods:{
    handleCancel(e) {
      this.$emit('handleCancel') 
    },
    //提交
    handleOk(e) {
      let that = this,url 
        this.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values); 
            that.$emit('handleOk')
            this.confirmLoading = true; 
            if(that.modalProps.isEdit == false){
                url ='/sys/index_image/create_index_image' //新增 首页图片
            }
            else{
                if(this.currentSort == this.form.getFieldValue('sort')){
                  delete values.sort
                }
                url = '/sys/index_image/modify_index_image' //修改 首页图片
            }
            submit_swiper_un(url,values).then((res)=>{
                that.confirmLoading = false;
                if(res.data.flag == true){
                    that.$message.success(res.data.msg)
                } 
                that.$emit('handleOk')
            })
            .catch((err)=>{
              console.log(err)
                that.confirmLoading = false;
            })
          }
          else{
              console.log(err)
          }
        });
    },  

    /*表单图片操作 对应数据绑定*/
    removeFile(e){ 
      this.removeFile_fromList(e,this.fileData)  
      //重置绑定表单项的值
      this.form.setFieldsValue({['imageFileCode']:''}) 
    },
    uploadSuccess(file,fileList){
      //重置绑定表单项的值
      this.form.setFieldsValue({['imageFileCode']:file.response.data.code }) 
    }
     

  },
  components:{
    imageUpload
  },
  beforeCreate () {
    this.form = this.$form.createForm(this);
  },
  mounted(){
    this.$nextTick(()=>{
      this.$on('openDialog',function(){ 
        this.modalProps.isEdit = false 
        
        /*清空表单输入和校验 resetFields需配合initial值不再被手动二次设置才能起作用，可用setfieldsvalue来设定（确保this.form取得到的情况下）xxxxxxxxx this.baseInit.sort.initialValue = 3 xxxxxxxx*/
        this.form.resetFields()
        this.fileData = []
        
      })
      this.$on('editDialog',function(data){
          this.modalProps.isEdit = true
          this.modalProps.title = '编辑问题模板'
          
          /*清空表单输入和校验*/ /*当前页面第一次打开modal时，field正在与value绑定，不需resetfield,不需重置*/  
          this.form.resetFields()
          this.fileData = []

          
          /* 实际仅打开第一次需要*/
          this.$nextTick(()=>{ 
              /*编辑时需设定form-item的值 */ 
              this.form.setFieldsValue({
                  'code':data.code,
                  'imageFileCode':data.imageFileCode,
                  'sort':data.sort,
                  'imageTitle':data.imageTitle,
                  'imageText':data.imageText,
              })
              this.currentSort = data.sort
              this.fileData = [{uid:data.imageFileCode,code:data.imageFileCode,status:'done',url:process.env.BASE_API+'/op/fileupload/download_file?fileCode='+data.imageFileCode}]
          })  
        
      })
    })
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>